<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui" xmlns:ui="http://java.sun.com/jsf/facelets">

<ui:composition template="/layouts/default.xhtml">
    <ui:define name="title">#{text['userForm.title']}</ui:define>
    <ui:define name="body">

        <h2>#{text['userForm.title']}</h2>


        <p>Please fill in user's information below:</p>

        <h:form id="userForm" styleClass="well" autocomplete="off">
            <h:inputHidden value="#{userForm.user.id}" id="id"/>
            <h:inputHidden value="#{userForm.user.version}" id="version"/>

            <div class="form-group">
                <h:outputLabel for="username" value="#{text['user.username']}" styleClass="control-label"/>
                <p:inputText styleClass="form-control" value="#{userForm.user.username}" id="username" required="true"/>
                <p:message for="username"/>
            </div>

            <div class="form-group">
                <h:outputLabel for="password" value="#{text['user.password']}" styleClass="control-label"/>
                <h:inputSecret styleClass="form-control" value="#{userForm.user.password}" id="password" redisplay="true"/>
                <p:message for="password"/>
            </div>

            <div class="form-group">
                <h:outputLabel for="firstName" value="#{text['user.firstName']}" styleClass="control-label"/>
                <h:inputText styleClass="form-control" value="#{userForm.user.firstName}" id="firstName"/>
                <p:message for="firstName"/>
            </div>

            <div class="form-group">
                <h:outputLabel for="lastName" value="#{text['user.lastName']}" styleClass="control-label"/>
                <h:inputText styleClass="form-control" value="#{userForm.user.lastName}" id="lastName" required="true"/>
                <p:message for="lastName"/>
            </div>

            <div class="form-group">
                <h:outputLabel for="email" value="#{text['user.email']}" styleClass="control-label"/>
                <h:inputText styleClass="form-control" value="#{userForm.user.email}" id="email" required="true"/>
                <p:message for="email"/>
            </div>

            <div class="form-group form-actions">
                <h:commandButton value="Save" action="#{userForm.save}" id="save" styleClass="btn btn-primary"/>
                <h:commandButton value="Delete" action="#{userForm.delete}" id="delete" styleClass="btn btn-danger"/>
                <h:commandButton value="Cancel" action="cancel" immediate="true" id="cancel" styleClass="btn btn-default"/>
            </div>

        </h:form>

        <script type="text/javascript">
            $(document).ready(function () {
                $("input[type='text']:visible:enabled:first", document.forms['userForm']).focus();
            });
        </script>
    </ui:define>
</ui:composition>
</html>
